<div class="badges">
    <button class="blue">Share Online</button>
    <button class="yellow">Working on it</button>
    <button class="green">Success</button>
    <button class="red">Error</button>
</div>
<style>
/* From Uiverse.io by kamehame-ha - Tags: success, error, share, light&dark, clean, badges, working */
/*

This is actually the most neutral button desing of all time,
fits everywhere no matter if it is dark or light mode,
just change colors. 
I created original using tailwindCSS, here's classes:

text-blue-500 bg-blue-500/10 border border-blue-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0
text-yellow-500 bg-yellow-500/10 border border-yellow-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0
text-green-500 bg-green-500/10 border border-green-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0
text-indigo-500 bg-indigo-500/10 border border-indigo-500 rounded-md px-2 py-[2px] text-sm cursor-pointer flex shrink-0

*/

.badges {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 16px */
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.badges > button {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  padding: 2px .5rem; /* 8px*/
  cursor: pointer;
  border: none;
  border-radius: 0.375rem; /* 6px */
  outline: none;
}

.badges .blue {
  background-color: rgba(59, 130, 246, 0.10);
  color: rgb(59 130 246);
  border: 1px rgb(59 130 246) solid;
}

.badges .yellow {
  background-color: rgba(234, 179, 8, 0.10);
  color: rgb(234 179 8);
  border: 1px rgb(234 179 8) solid;
}

.badges .green {
  background-color: rgba(34, 197, 94, 0.10);
  color: rgb(34 197 94);
  border: 1px rgb(34 197 94) solid;
}

.badges .red {
  background-color: rgba(239, 68, 68, 0.10);
  color: rgb(239 68 68);
  border: 1px rgb(239 68 68) solid;
}
</style>
